<!--滚动排名列表-->
<template>
  <div class="">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <PnScrollRankingBoard :config="config" :style="{
      width: (layoutItem.layoutItemConfigData.width - 2) + 'px',
      height: (layoutItem.layoutItemConfigData.height -2) + 'px'
    }" />
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  const _this = {
    name: 'RollRankingListComp', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin],
    attr: {
      version: '2.0',
      configDataTemp: Object.assign({

        rowNum: 5,
        waitTime: 2000,
        carousel: 'single',
        unit: '',
        sort: true,
        themeColor: '#1370fb',
        textColor: '#fff',

      }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
        ds_resultObjTemplate: [
          {
            field: 'name',
            remark: '名称'
          },
          {
            field: 'value',
            remark: '值'
          }
        ],
        ds_resultObj: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 78
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          },
          {
            name: '信阳',
            value: 45
          },
          {
            name: '漯河',
            value: 29
          }
        ],
        ds_useFilter: true, // 是否使用过滤器，默认不使用
        ds_useTimer: true, // 是否开启定时器配置，默认不开启
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildFuncCompInteractionConfiguration())
    },
    data() {
      return {}
    },
    mounted() {
      this.init();

      this.setTimer(() => { //定时器，如果当前组件不使用定时器，可以将此段代码删除
        this.init()
      })
    },
    methods: {
      init () { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.runCustomGlobalJsCode()
        }, (result) => {
          this.runCustomGlobalJsCode()
        });
      }
    },
    computed: {
      config () {
        return {
          data: this.runCustomFilter(this.component.compConfigData.ds_resultObj),
          rowNum: this.component.compConfigData.rowNum,
          waitTime: this.component.compConfigData.waitTime,
          carousel: this.component.compConfigData.carousel,
          unit: this.component.compConfigData.unit,
          sort: this.component.compConfigData.sort,
          themeColor: this.component.compConfigData.themeColor,
          textColor: this.component.compConfigData.textColor,
        }
      }
    }
  };

  export default _this
</script>

<style scoped>

</style>
